<template>
    <div class="line">
        <div class="line_tu" :id="id"></div>
    </div>
</template>

<script setup>
import { defineProps, onMounted, inject, defineExpose } from 'vue'

const echarts = inject('echarts')

const data = defineProps({
    id: String,
    list: Array
})

let chartDom = null
let myChart = null

const setLine = (arr) => {
    if (arr.length === 0) return
    let xAxis = []
    let yAxis = []
    let series = []
    let data = []
    arr.forEach(item => {
        xAxis.push(
            {
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: item.name,
            }
        )
        yAxis.push(
            {
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                minInterval: item.min_interval !== 0 ? item.min_interval : undefined, // 设置最小间隔
                maxInterval: item.max_interval !== 0 ? item.max_interval : undefined, // 设置最大间隔
            },
            {
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
            }
        )
        series.push(
            {
                name: item.line,
                type: 'line',
                showSymbol: false,
                lineStyle: {
                    color: '#2791F4'
                },
                data: item.val
            },
            {
                name: item.line,
                type: 'bar',
                showSymbol: false,
                yAxisIndex: 1,
                data: item.val
            }
        )
        data.push(item.line)
    })

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data,
            textStyle: {
                color: '#fff'
            }
        },
        xAxis,
        grid: {
            top: '1%',
            left: '3%',
            right: '4%',
            bottom: '25%',
            containLabel: true
        },
        yAxis:yAxis,
        dataZoom: [
            {
                startValue: arr[0].name[0]
            },
            {
                type: 'inside',
                textStyle: {
                    color: '#fff'
                },
                moveHandleStyle: {
                    color: '#fff'
                },
                handleStyle: {
                    color: '#fff'
                }
            },
            // {
            //     type: 'slider',
            //     yAxisIndex: 0,
            //     filterMode: 'none'
            // },
            // {
            //     type: 'inside',
            //     yAxisIndex: 0,
            //     filterMode: 'none'
            // }
        ],
        series
    };
    myChart.setOption(option);
}

defineExpose({ setLine })

onMounted(() => {
    chartDom = document.getElementById(data.id);
    myChart = echarts.init(chartDom);

    setLine(data.list)
})
</script>

<style lang="scss" scoped>
.line {
    width: 100%;
    height: 100%;
    .line_tu {
        width: 100%;
        height: 100%;
    }
}
</style>
